<div class="l-wrapper font-opensans">
    <ul class="l-type-select">
        <li [class.inactive]="isReservedType">
            <button class="fas fa-clock" (click)="changeToReservedType()"></button>
        </li>
        <li [class.inactive]="!isReservedType">
            <button class="fas fa-calendar-alt" (click)="changeToCalendarType()"></button>
        </li>
    </ul>
    <pp-period-selector-using-reserved-time 
        [showRealTimeButton]="showRealTimeButton"
        [isRealTimeMode]="isRealTimeMode" 
        [periodList]="periodList" 
        [initPeriod]="selectedPeriod"
        (outChangePeriod)="onChangePeriodTime($event)"
        [isHidden]="!isReservedType"></pp-period-selector-using-reserved-time>
    <pp-period-selector-using-calendar 
        [i18nText]="i18nText"
        [periodList]="periodList"
        [initPeriod]="selectedPeriod"
        [initEndTime]="selectedEndTime"
        [maxPeriod]="maxPeriod"
        [timezone]="timezone"
        [dateFormat]="dateFormat"
        (outChangePeriod)="onChangeCalendarTime($event)"
        [isHidden]="isReservedType"></pp-period-selector-using-calendar>
</div>